import React, { useState ,useEffect} from 'react'
import {Overlay,Button,Field,Form,Picker,Toast} from "react-vant"
import { areaList } from '@vant/area-data';
import { Area } from 'react-vant';
function AddresAlert(props) {
    const {visible,title,onClose,addAddress,item, editAddress}=props
    let [areaVales,setAreaValues]=useState([])

    const [form] =Form.useForm()
useEffect(()=>{
  if(item.id){
    form.setFieldsValue(item)
  }else{
    form.resetFields()
  }

},[props])
    const onFinish=(values)=>{
      values.citys=areaVales
        console.log("提交",values,areaVales)
        // addAddress(values,areaVales)
        editAddress(values)
        onClose()
    }
  return (
    <div>
        <Overlay visible={visible}>
        <div className='overCont'>
            <button onClick={
              ()=>{
                onClose()
              }
            }>x</button>
            <div className='title'>新增地址</div>
            <div>
        
    <Form
      form={form}
      showValidateMessage={false}
      onFinish={onFinish}
      footer={
        <div style={{ margin: '16px 16px 0' }}>
          <Button round nativeType="submit" type="primary" block>
            提交
          </Button>
        </div>
      }
    >
      <Form.Item
        tooltip={{
          message:
            '用户名是必填',
        }}
        intro="确保这是唯一的用户名"
        rules={[{ required: true, message: '请填写用户名' }]}
        name="name"
        label="用户名"
      >
        <Field placeholder="请输入用户名" />
      </Form.Item>
      <Form.Item
        tooltip={{
          message:
            '手机号是必填',
        }}
      
        rules={[{ required: true,
             message: '请填写手机号' }]}
        name="phone"
        label="手机号"
      >
        <Field placeholder="请输入手机号" />
      </Form.Item>
      <Form.Item name="citys" label='选择城市'>
      <Area title="标题" areaList={areaList}
       onChange={
         (values)=>{
          setAreaValues(values)
      }
      } 
      />;
      </Form.Item>
      <Form.Item
        tooltip={{
          message:
            '详情地址是必填',
        }}
        intro="请填写地址"
        rules={[{ required: true, message: '请填写详细地址' }]}
        name="addres"
        label="详情地址"
      >
        <Field placeholder="请输入详情地址" />
      </Form.Item>

    </Form>
 
            </div>
       
           
        </div>
      </Overlay>
    </div>
  )
}

export default AddresAlert